<template>
	<view class="bg">
		<view class="content">
			<view :class="title.length>30?'c_title_long':'c_title'">{{title}}</view>
			<view class="c_time">创建时间：{{time}}</view>
			<view class="c_img" v-if="imgUrl">
				<image :src='imgUrl' mode="widthFix" ></image>
			</view>
			<view v-html="content" class="c_content"></view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data(){
			return{
				id: '',//公告id
				url: 'notice/noticeDetailsC',
				title: '',
				imgUrl: '',
				content: '',
				time: '',
			}
		},
		onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			this.id = option.id;
		},
		onShow() {
			this.getDetail();
		},
		methods:{
			getDetail(){
				this.$req.crm(this.url, {
					id: this.id
				}).then(v => {
					if(v.data){
						this.title = v.data.title;
						this.imgUrl = v.data.picUrl;
						this.content = v.data.contentText;
						this.time = v.data.insertTimeDate;
					}
				})
			}
		}
	}
</script>

<style>
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
	}
	.content{
		width: 90%;
		height: 90%;
		position: absolute;
		top: 5%;
		left: 5%;
		background-color: rgba(255,255,255,0.6);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		overflow-y: scroll;
		border-radius: 5px;
	}
	.c_title{
		width: 80%;
		height: 100upx;
		position: relative;
		margin: 5% 10%;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #408CFF;
		font-weight: 500;
		letter-spacing: 1px;
	}
	.c_title_long{
		width: 80%;
		height: auto;
		position: relative;
		margin: 5% 10%;
		line-height: 50upx;
		text-align: left;
		text-indent: 20upx;
		font-size: 34upx;
		color: #78a8f2;
		font-weight: 500;
	}
	.c_img{
		width: 80vw;
		height: auto;
		position: relative;
		text-align: center;
		padding: 20upx 5vw;
	}
	.c_img image{
		width: 100%;
		height: auto;
	}
	.c_content{
		width: 90vw;
		height: auto;
		position: relative;
		padding: 20upx 5vw;
		font-size: 28upx;
		color: #555;
	}
	.c_time{
		width: 90%;
		height: 40upx;
		position: relative;
		top: 0;
		left: 5%;
		text-align: right;
		color: #999;
		line-height: 40upx;
		font-size: 28upx;
	}
</style>
